<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :mode="mode"
      :setting="{name: $t('common.form.preview.cascader.cascader')}"
      :disabled="true"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          :disabled="true"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 选项 -->
    <div class="form-setting-options">
      <h3>{{$t('common.base.option')}}</h3>
      <div class="form-setting-group form-select-setting-operation">
        <button type="button" class="btn-text" @click="open">{{$t('common.base.configurationOption')}}</button>
      </div>
    </div>
    <!-- end 选项 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import Cascader from '../components/index';
import { settingProps } from '@src/component/form/components/props';
/* enum */
import TableNameEnum from '@model/enum/TableNameEnum.ts';
export default {
  name: 'form-cascader-setting-consult-name',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    // 是否是附加组件表单
    isTaskCardForm() {
      return (
        [
          TableNameEnum.TaskCard,
          TableNameEnum.CustomerCard,
          TableNameEnum.ProductCard,
        ].indexOf(this.mode) > -1
      );
    },
  },
  methods: {
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
    open() {
      let source = this.field.setting.dataSource || [];
      let maxDeep = this.field.setting.maxDeep || 2;
      let defaultValue = (this.field.defaultValue && this.field.defaultValue.split(',')) || [];
      let dataSourceLanguage = this.field.setting.dataSourceLanguage || {};
      const setting = {
        data: source,
        maxDeep,
        defaultValue,
        dataSourceLanguage,
        field: this.field,
      };
      Cascader.setting(setting).then(result => {
        if (result.status == 0) {
          this.field.setting.dataSource = result.data.dataSource;
          this.field.setting.maxDeep = result.data.maxDeep;
          this.field.defaultValue = result.data.defaultValue.join(',');
          this.field.setting.dataSourceLanguage = result.data.dataSourceLanguage;
        }
      });
    },
  },
};
</script>
